<template>
	<view class="container">
		<fu-navbar title="创建巡检计划" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="tab-box">
			<view class="tab" :class="{'tab-active': tabCurrent == 0}" @click="tabChange(0)">基本信息</view>
			<view class="tab" :class="{'tab-active': tabCurrent == 1}" @click="tabChange(1)">工作项</view>
		</view>
		<view class="box margin-t-32" v-if="tabCurrent == 0">
			<view class="flex align-center padding-tb-24 border-b-c9">
				<image src="../../../static/images/icon31.png" mode="widthFix" class="t-icon"></image>
				<text class="title">基本信息</text>
			</view>
			<view class="item flex align-center justify-between border-b-c9 padding-tb-32">
				<view class="label">设备编码</view>
				<view class="flex align-center" @click="navTo('/pages/service/select-device/index?type=xunjian')">
					<view class="color-c" v-if="!emCode">选择设备</view>
					<view class="" v-else>{{emCode}}</view>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-c9 padding-tb-32">
				<view class="label">设备名称</view>
				<view class="flex align-center">
					<input placeholder="请输入" placeholder-class="pla-ipt" class="ipt" disabled v-model="emName" />
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-c9 padding-tb-32">
				<view class="label">设备区域</view>
				<view class="flex align-center">
					<text v-if="areaValue">{{areaValue}}</text>
					<text v-else class="color-c">请选择</text>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-c9 padding-tb-32">
				<view class="label">巡检位置</view>
				<view class="flex align-center">
					<input placeholder="输入位置" placeholder-class="pla-ipt" class="ipt" disabled v-model="emLocation" />
				</view>
			</view>
			<view class="item flex align-center justify-between border-b-c9 padding-tb-32">
				<view class="label">巡检人</view>
				<view class="flex align-center" @click="navTo(`/pages/service/select-per/index`)">
					<view class="color-c" v-if="!employeeName">请选择</view>
					<view class="" v-else>{{employeeName}}</view>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="item flex align-center justify-between border-b-c9 padding-tb-32">
				<view class="label">开始时间</view>
				<view class="flex align-center" @click="toggleTab('time', 'start')">
					<view class="" v-if="startTime">{{startTime}}</view>
					<view class="color-c" v-else>选择开始日期</view>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<view class="item flex align-center justify-between padding-tb-32">
				<view class="label">巡检时间</view>
				<view class="flex align-center" @click="toggleTab('date', 'end')">
					<view class="" v-if="startDay">{{startDay}}</view>
					<view class="color-c" v-else>选择巡检时间</view>
					<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix"></image>
				</view>
			</view>
			<!-- <view class="item flex align-center justify-between padding-tb-24">
				<view class="label flex-shrink">点检内容</view>
				<view class="flex align-center" style="width: 60%;">
					<textarea placeholder-class="pla-ipt" placeholder="点击输入多行文本" class="tra"></textarea>
				</view>
			</view> -->
		</view>
		<view class="box margin-t-32" v-if="tabCurrent == 1">
			<view class="border-b flex align-center justify-between padding-tb-24 border-b-c9">
				<view class="flex align-center">
					<image src="../../../static/images/icon33.png" mode="widthFix" class="work-icon margin-r-12"></image>
					<view class="title">设置巡检工作项</view>
				</view>
				<view class="flex align-center" @click="navTo(`/pages/inspection/works/index?planType=2`)">
					<image class="add-r-icon margin-r-12" src="../../../static/images/add.png" mode="aspectFill"></image>
					<text class="r-txt">新增工作项</text>
				</view>
			</view>
			<del-slide-left v-for="(item, index) in workList" :key="index" :item="item"  :data_transit="{index:index,item:item}" @delItem="cancel(index)">
				<view class="flex align-center justify-between padding-tb-12 border-b-c9">
					<view class="over-hidden">
						<view class="fs-28 text-ellipsis">{{item.taskName}}</view>
						<view class="fs-26 margin-t-18" style="color: #dcdcdc;">{{item.taskDesc}}</view>
					</view>
					<view class="flex-shrink flex align-center">
						<image :src="workIcon" style="width: 60rpx;height: 60rpx;" v-if="workIcon"></image>
						<image src="../../../static/images/arrow-r.png" class="arrow-r" mode="widthFix" style="width: 32rpx;"></image>
						<!-- <image src="../../../static/images/close2.png" style="width: 40rpx;height: 40rpx;margin-left: 32rpx;" @click="cancel(index)"></image> -->
					</view>
				</view>
			</del-slide-left>
			<view class="no-data flex justify-center" v-if="workList.length == 0">
				<image src="../../../static/empty/no-data.png" class="img" mode="widthFix"></image>
			</view>
		</view>
		
		<view class="bottom-wrap">
			<view class="bottom">
				<view class="btn" @click="submit">确认</view>
			</view>
		</view>
		
		<!-- 选择日期 -->
		<w-picker mode="date" fields="day" :value="dateValue" themeColor="#30a3e0"  @confirm="onConfirm($event, 'date')" ref="date"></w-picker>
		<!-- 选择时间 -->
		<w-picker mode="time" :second="false" themeColor="#30a3e0"  @confirm="onConfirm($event, 'time')" ref="time"></w-picker>
		<!-- 选择区域 -->
		<w-picker mode="linkage" :options="areaList" themeColor="#30a3e0" :defaultProps="defaultProps" default-type="name" @confirm="onConfirm($event, 'linkage')" ref="linkage"></w-picker>
	</view>
</template>

<script>
	import delSlideLeft from '@/components/delSlideLeft/delSlideLeft.vue';
export default {
	components: {
		delSlideLeft
	},
	data() {
		return {
			dateValue: '',
			emName: '',
			startTime: '',
			startDay: '',
			timeType: '',
			tabCurrent: 0,
			areaValue: null,
			areaList: [],
			defaultProps: {
				value: 'id',
				label: 'name',
				children: 'children'
			},
			workIcon: '',
			emId: '',
			emCode: '',
			emArea: '',
			emBlock: '',
			emLocation: '',
			patrolEmployeeId: '',
			employeeName: '',
			workList: []
		}
	},
	onLoad() {
		// this.getArea();
		uni.$on('getDevice', data => {
			console.log(data)
			this.emName = data.emName
			this.emId = data.id
			this.emCode = data.emCode
			this.emArea = data.emArea
			this.emBlock = data.emBlock
			this.areaValue = `${data.emArea} ${data.emBlock}`
			this.emLocation = data.emLocation
		})
		uni.$on('getPerId', data => {
			this.patrolEmployeeId = data.id
			this.employeeName = data.employeeName
		})
		uni.$on('getWorks', data => {
			data.forEach(item => {
				this.workList.push(item)
			})
		})
	},
	onShow() {
		
	},
	onUnload() {
		uni.$off('getDevice')
		uni.$off('getPerId')
		uni.$off('getWorks')
	},
	methods: {
		cancel(i) {
			this.workList.splice(i, 1)
		},
		toggleTab(ref, type) {
		  this.$refs[ref].show();
		  if (type) {
			  this.timeType = type
		  }
		},
		onConfirm(e, type) {
			console.log(e)
			if (type == 'date') {
				this.startDay = e.value
			} else if (type == 'linkage') {
				
			} else if (type == 'selector') {
				this.workIcon = e.result
			} else if (type == 'time') {
				this.startTime = e.result
			}
		},
		navTo(path) {
			uni.navigateTo({
				url: path
			})
		},
		tabChange(e) {
			this.tabCurrent = e
		},
		// 获取设备位置
		getArea() {
			this.$api.post(global.apiUrls.selectEquipmentLocationLink).then(res => {
				if (res.data.code == 9100) {
					this.areaList = res.data.info
				}
			})
		},
		submit() {
			if (!this.emId) {
				uni.showToast({
					title: '请选择设备',
					icon: 'none'
				})
				return
			}
			if (!this.patrolEmployeeId) {
				uni.showToast({
					title: '请选择巡检人',
					icon: 'none'
				})
				return
			}
			if (!this.startTime) {
				uni.showToast({
					title: '请选择开始时间',
					icon: 'none'
				})
				return
			}
			if (!this.startDay) {
				uni.showToast({
					title: '请选择巡检时间',
					icon: 'none'
				})
				return
			}
			let nowDate = new Date().getTime();
			let time = `${this.startDay} ${this.startTime}`
			let selectDate = new Date(time).getTime();
			if (selectDate < nowDate) {
				uni.showToast({
					title: '所选时间已过期，请重新选择',
					icon: 'none'
				})
				return
			}
			if (this.workList.length == 0) {
				uni.showToast({
					title: '请设置巡检工作项',
					icon: 'none'
				})
				return
			}
			uni.showLoading()
			this.$api.post(global.apiUrls.insertPatrol, {
				emId: this.emId,
				patrolEmployeeId: this.patrolEmployeeId,
				startTime: this.startTime,
				startDay: this.startDay
			}).then(res => {
				if (res.data.code == 9100) {
					let id = res.data.info
					if (this.workList.length > 0) {
						this.addTask(id)
					} else {
						uni.hideLoading()
						uni.showToast({
							title: '操作成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
					
				} else {
					uni.hideLoading()
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}).catch(() => {
				uni.hideLoading()
			})
		},
		// 新增工作项
		addTask(id) {
			let arr = []
			this.workList.forEach(item => {
				arr.push(item.id)
			})
			this.$api.post(global.apiUrls.insertPatrolTask, {
				id: id,
				taskIds: arr.join(',')
			}).then(res => {
				uni.hideLoading()
				if (res.data.code == 9100) {
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}).catch(() => {
				uni.hideLoading()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.tab-box {
	display: flex;
	height: 88rpx;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	.tab {
		width: 33%;
		text-align: center;
		position: relative;
		font-size: 28rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #7F7F7F;
	}
	.tab-active {
		color: #333;
		&::after {
			width: 82rpx;
			height: 6rpx;
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin: 0 auto;
			background-color: #555;
		}
	}
}
.box {
	background-color: #fff;
	padding: 0 24rpx;
	.title {
		font-size: 34rpx;
		font-weight: bold;
	}
	.t-icon {
		width: 44rpx;
		margin-right: 24rpx;
	}
	.item {
		font-size: 28rpx;
		.ipt {
			text-align: right;
			font-size: 28rpx;
		}
		.pla-ipt {
			color: #ccc;
		}
		.arrow-r {
			width: 32rpx;
		}
		.tra {
			height: 120rpx;
			font-size: 28rpx;
		}
	}
	.add-icon {
		width: 64rpx;
	}
	.work-icon {
		width: 54rpx;
	}
	.add-r-icon {
		width: 42rpx;
		height: 42rpx;
	}
	.r-txt {
		color: #1296db;
		font-size: 28rpx;
	}
	.no-data {
		min-height: 260rpx;
		.img {
			width: 160rpx;
			margin-top: 32rpx;
		}
	}
}
.bottom-wrap {
	height: 150rpx;
	.bottom {
		// background-color: #fff;
		padding: 24rpx 60rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 9;
		.btn {
			width: 100%;
			height: 88rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 88rpx;
			color: #fff;
			background-color: #0f68f0;
			font-size: 34rpx;
			font-weight: bold;
		}
	}
}
</style>